<ion-header>
  <ion-toolbar>
    <ion-title>
      找回密码
    </ion-title>
    <ion-buttons>
      <button ion-button (click)="dismiss()">关闭</button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="findPasswordForm" (ngSubmit)="confirm()">
    <ion-list>
      <ion-item>
        <ion-label>手机号</ion-label>
        <ion-input type="number" formControlName="phone"></ion-input>
      </ion-item>
      <div *ngIf="!findPasswordForm.controls.phone.valid && findPasswordForm.controls.phone.touched" class="validation-failed">
        请输入正确的电话号码
      </div>
      <ion-item>
        <ion-label>验证码</ion-label>
        <ion-input type="number" formControlName="verificationCode"></ion-input>
      </ion-item>
      <div *ngIf="!findPasswordForm.controls.verificationCode.valid && findPasswordForm.controls.verificationCode.touched" class="validation-failed">
        请输入验证码
      </div>
      <ion-item>
        <ion-label>新密码</ion-label>
        <ion-input type="password" formControlName="newPassword"></ion-input>
      </ion-item>
      <div *ngIf="!findPasswordForm.controls.newPassword.valid && findPasswordForm.controls.newPassword.touched" class="validation-failed">
        请输入新密码
      </div>
    </ion-list>
    <div padding-horizontal>
      <button ion-button block type="submit" [disabled]="!findPasswordForm.valid">确　认</button>
    </div>
    <button class="verification" ion-button small color="secondary" *ngIf="findPasswordForm.controls.phone.valid">获取验证码</button>
  </form>
</ion-content>
